<template>
	<div>
		<div class="t-head">
			<div class="t-t">常用分类</div>
			<img src="../../type-img/t-t.png" class="t-img" />
			<div class="t-b">编辑</div>
		</div>
		<div class="t-mi">
			<div class="t-spa1">添加常用分类</div>
		</div>
		<div class="t-q">
			<div class="t-spa2">其他分类</div>
		</div>
		<div class="t-t1">
			<div class="t-tt1">
				<img src="../../type-img/1.png" />
				<p>畅销小说</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/5.png" />
				<p>精品内容</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/9.png"/>
				<p>健康</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/13.png" />
				<p>历史</p>
			</div>
		</div>
		<div class="t-t2">
			<div class="t-tt1">
				<img src="../../type-img/2.png" />
				<p>儿童</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/6.png" />
				<p>娱乐</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/10.png"/>
				<p>女性</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/14.png" />
				<p>搞笑</p>
			</div>
		</div>
		<div class="t-t3">
			<div class="t-tt1">
				<img src="../../type-img/3.png" />
				<p>教育</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/7.png" />
				<p>公开课</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/11.png"/>
				<p>文化</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/15.png" />
				<p>评书</p>
			</div>
		</div>
		<div class="t-t4">
			<div class="t-tt1">
				<img src="../../type-img/4.png" />
				<p>戏曲</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/8.png" />
				<p>财经</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/12.png"/>
				<p>科技</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/16.png" />
				<p>汽车</p>
			</div>
		</div>
		<div class="t-t5">
			<div class="t-tt1">
				<img src="../../type-img/17.png" />
				<p>体育</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/18.png" />
				<p>校园</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/19.png"/>
				<p>游戏动漫</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/20.png" />
				<p>广播剧</p>
			</div>
		</div>
		<div class="t-t6">
			<div class="t-tt1">
				<img src="../../type-img/1.png" />
				<p>影视</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/5.png" />
				<p>旅游</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/9.png"/>
				<p>自媒体</p>
			</div>
			<div class="t-tt4">
				<img src="../../type-img/13.png" />
				<p>品牌电台</p>
			</div>
		</div>
		<div class="t-t7">
			<div class="t-tt1">
				<img src="../../type-img/27.png" />
				<p>时尚</p>
			</div>
			<div class="t-tt2">
				<img src="../../type-img/26.png" />
				<p>中国之声</p>
			</div>
			<div class="t-tt3">
				<img src="../../type-img/25.png"/>
				<p>会员专区</p>
			</div>
		</div>
	</div>
</template>

<script>
	
</script>

<style>
	.t-t7{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t7 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t7 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t6{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t6 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t6 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t5{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t5 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t5 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t4{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t4 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t4 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t3{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t3 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t3 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t2{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t2 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t2 img{
		width: 1rem;
		height: 0.934782rem;
	}
	.t-t1{
		display: flex;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		border-bottom: solid 0.021739rem #f5f5f5;
		font-size: 0.347826rem;
	}
	.t-t1 div{
		width: 25%;
		height: 1.73913rem;
		border-right: solid 0.021739rem #f5f5f5;
		padding-top: 0.353043rem;
	}
	.t-t1 img{
		width: 1rem;
		height: 0.934782rem;
	}
	/*.t-tt4{
		width: 25%;
	}
	.t-tt3{
		width: 25%;
	}
	.t-tt2{
		display: inline-block;
	}
	.t-tt1{
		display: inline-block;
	}
	.t-spa2{
		margin-left: 0.695652rem;
		color: #b2b2b3;
	}*/
	.t-q{
		width: 100%;
		height: 1.156956rem;
		background-color: #f5f5f8;
		display: flex;
		align-items: center;
		font-size: 0.397826rem;
	}
	.t-spa1{
		border: solid 0.021739rem #e2e4e8;
		padding: 0.260869rem 1.304347rem;
		font-size: 0.369565rem;
		color: #777777;
		border-radius: 1.086956rem;
		margin-left: 2.608695rem;
	}
	.t-mi{
		display: flex;
		align-items: center;
		width: 100%;
		height: 2.492608rem;
	}
	.t-head{
		width: 100%;
		height: 1.156956rem;
		background-color: #f5f5f8;
		display: flex;
		align-items: center;
		font-size: 0.397826rem;
	}
	.t-t{
		margin-left: 0.695652rem;
		color: #b2b2b3;
	}
	.t-img{
		margin-left: 0.217391rem;
		width: 0.447826rem;
		height: 0.447826rem;
	}
	.t-b{
		margin-left: 4.408695rem;
		border: solid 0.021739rem #dfe1e6;
		padding: 0.102173rem 0.543478rem ;
		border-radius: 1.086956rem;
		color: #707071;
	}
</style>